<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 7</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app=Vue.createApp({
        data(){
            return{
            //   message:'<strong>hello world</strong>'  
              message:'hello world',
              disabled:false,
              show:true,
              name:"title",
              event:'click',
            }
        },
        methods:{
            handleClick(){
                alert('click')
            }
        },
        // template:"<div v-html='message'></div>"
        // template:"<div v-bind:title='message'>hello world</div>"
        // template:`<input v-bind:disabled="disabled" />`
        // template:"<div v-once>{{message}}</div>"  // 只执行一次   当数据发生改变时不再起作用
        // template:"<div v-if='show'>{{message}}</div>"
        // template:`
        // <div @[event]="handleClick" :[name]="message">
        //     {{message}}
        // </div>

        // 使用修饰符prevent阻止默认事件
        template:`
        <form action="https://www.baidu.com" @click.prevent="handleClick">
            <button type="submit">提交</button>
        </form>`
    });
    const vm = app.mount('#root')
</script>